<template>
  <div :class="{'rightBorder': isRightBorder, 'mobile-item': showMobilePage, 'stair-data-item-br': showMobilePage ? '' : iconIndex !== 3}" class="stair-data-item">
    <div class="data-item-right">
      <template v-if="!showMobilePage">
        <img v-if="!showMobilePage" :src="icons[iconIndex]" alt="icon">
        <div class="label-ground">
          <span class="label">{{ label }}</span>
          <el-tooltip effect="dark" placement="top">
            <div slot="content" style="max-width: 170px; text-align: center">
              <!-- 下单日期为本月之前的（待核销或部分核销）订单，封账发起时间前，待核销总额 -->
              {{ tip }}
            </div>
            <tipIcon is-diy class="icon-info" />
          </el-tooltip>
          <span v-if="!showMobilePage" class="label">:</span>
        </div>
        <div class="amount">
          <el-tooltip effect="dark" placement="top">
            <div slot="content" style="max-width: 170px; text-align: center">
              <!-- 下单日期为本月之前的（待核销或部分核销）订单，封账发起时间前，待核销总额 -->
              {{ dataDetail | moneyFilter }}
            </div>
            <span class="inner-amount">
              {{ dataDetail | bigNumberZH }}
            </span>
          </el-tooltip>
        </div>
      </template>
      <template v-else>
        <div class="amount">
          <el-tooltip effect="dark" placement="top">
            <div slot="content" style="max-width: 170px; text-align: center">
              <!-- 下单日期为本月之前的（待核销或部分核销）订单，封账发起时间前，待核销总额 -->
              {{ dataDetail | moneyFilter }}
            </div>
            <span class="inner-amount">
              {{ dataDetail | bigNumberZH }}
            </span>
          </el-tooltip>
        </div>
        <div class="label-ground">
          <span class="label">{{ label }}</span>
          <el-tooltip effect="dark" placement="top">
            <div slot="content" style="max-width: 170px; text-align: center">
              <!-- 下单日期为本月之前的（待核销或部分核销）订单，封账发起时间前，待核销总额 -->
              {{ tip }}
            </div>
            <tipIcon is-diy class="icon-info" />
          </el-tooltip>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { bigNumberZH, moneyFilter } from '@/filters/number';
import icon_4 from '@/assets/dataDisplay/icon_30.png';
import rmb from '@/assets/dataDisplay/rmb.png';
import icon_44 from '@/assets/dataDisplay/icon_44.png';
import icon_45 from '@/assets/dataDisplay/icon_45.png';
import { mapState } from 'vuex';
export default {
  name: 'StairDataItem',
  filters: {
    bigNumberZH,
    moneyFilter
  },
  props: {
    iconImage: {
      type: String,
      default: ''
    },
    tip: {
      type: String,
      default: ''
    },
    writeOffData: {
      type: Object,
      default: () => null
    },
    propName: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    isRightBorder: {
      type: Boolean,
      default: false
    },
    iconIndex: {
      type: Number | String,
      default: 0
    }
  },
  data() {
    return {
      icons: [icon_4, icon_45, rmb, icon_44]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    dataDetail() {
      if (this.writeOffData && this.propName in this.writeOffData) {
        if (this.writeOffData[this.propName] !== 0) {
          return this.writeOffData[this.propName] / 100;
        } else {
          return this.writeOffData[this.propName];
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.stair-data-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  min-height: 40px;
  padding: 0 20px 0 9px;
  .data-item-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    img {
      width: 14px;
      margin-right: 4px;
    }
    .label-ground {
      display: flex;
    }
  }
  .label-ground {
    display: flex;
    align-items: center;
    margin-right: 4px;
  }
  .label {
    font-size: 14px;
    color: #A9AFB6;
    margin-right: 4px;
  }
  .amount {
    display: flex;
    font-size: 16px;
    font-family: DIN Alternate, DIN Alternate-Bold;
    font-weight: 700;
    color: #5f77c3;
    line-height: 20px;
    .inner-amount {
      display: inline-block;
      max-width: 100%;
      white-space: nowrap;
    }
  }
  &.stair-data-item-br {
    &::after {
      content: '';
      position: absolute;
      right: 0;
      background-color: #DDE1EA;
      width: 1px;
      height: 14px;
    }
  }
}
.icon-info {
  color: #999;
  font-size: 14px;
  &:hover {
    color: #406EFF;
  }
}
.mobile-item {
  padding: 0 20px;
  justify-content: center;
  .data-item-right {
    flex-direction: column;
    .amount {
      margin-bottom: 4px;
      font-size: 24px;
      font-weight: 700;
      color: #5f77c3;
      display: flex;
    }
    .label-ground {
      .label {
        font-size: 14px;
      }
    }
  }
}
</style>
